import React from 'react';
import SearchList from '@/components/SearchList';
import { useState, useEffect } from 'react';
import {
  PlusCircleFilled,
  SelectOutlined,
  EyeFilled,
  DeleteFilled,
  SnippetsFilled,
} from '@ant-design/icons';
import { Button, Table, notification, Tooltip } from 'antd';
import {
  transFormIndex,
  checkStatusMap,
  showDeleteConfirm,
} from '@/utils/util';
import API from '@/api/xjindex.js';
import { useModel } from 'umi';

function SafeCheckManage({ history }) {
  const [dataSouce, setDataSouce] = useState([]);
  const { initialState } = useModel('@@initialState');
  const { orgId, userId } = initialState.info;
  const [cuiban, setCuiBan] = useState([]);
  const [orgList, setOrgList] = useState([]);
  const [params, setParams] = useState({
    pageNo: 1,
    pageSize: 10,
    status: '-1',
    createTime: '',
    unitId: '-1',
  });
  const [pagination, setPagination] = useState({
    pageSize: 10, //每条的页数
    current: 1,
    showQuickJumper: true,
  });
  const searchList = [
    {
      name: 'unitId',
      title: '所属单位',
      type: 'select',
      otherProps: {
        options: orgList,
      },
    },
    {
      name: 'status',
      type: 'select',
      title: '报告状态',
      otherProps: {
        options: [
          {
            label: '未读',
            value: 1,
          },
          {
            label: '已读未处置',
            value: 2,
          },
          {
            label: '已处置',
            value: 3,
          },
        ],
      },
    },
    {
      name: 'createTime',
      type: 'datepicker',
      title: '创建时间',
    },
  ];
  const linkDetail = (id) => {
    history.push({
      pathname: '/networkDefence/safeCheckManage/detail',
      query: {
        id,
      },
    });
  };
  const linkHandle = (id) => {
    history.push({
      pathname: '/networkDefence/safeCheckManage/handle',
      query: {
        id,
      },
    });
  };
  const linkAdd = () => {
    history.push('/networkDefence/safeCheckManage/create');
  };
  const columns = [
    {
      title: '序号',
      key: 'index',
      render: (text, r, index) => transFormIndex(pagination, index),
    },
    {
      title: '所属单位',
      dataIndex: 'orgName',
    },
    {
      title: '报告状态',
      dataIndex: 'status',
      render: (text) => checkStatusMap(text),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '处置时间',
      dataIndex: 'disposalTime',
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      render: (text, r) => (
        <div>
          <Tooltip title="查看">
            <Button
              type="link"
              icon={<EyeFilled />}
              className="table-icon"
              onClick={() => linkDetail(r.id)}
            ></Button>
          </Tooltip>
          {r.status != 3 && r.orgId == orgId ? (
            <Tooltip title="处置">
              <Button
                type="link"
                icon={<SnippetsFilled />}
                className="table-icon"
                onClick={() => linkHandle(r.id)}
              ></Button>
            </Tooltip>
          ) : (
            ''
          )}
          {r.status != 3 && r.createId == userId ? (
            <Tooltip title="删除">
              <Button
                type="link"
                icon={<DeleteFilled />}
                className="table-icon"
                onClick={() => showDeleteConfirm(() => delFn(r.id))}
              ></Button>
            </Tooltip>
          ) : (
            ''
          )}
        </div>
      ),
    },
  ];
  columns.forEach((item) => {
    item.align = 'center';
  });

  const initList = (params = {}) => {
    const dd = {
      pageNo: 1,
      pageSize: 10,
      status: '-1',
      createTime: '',
      unitId: '-1',
    };
    for (let d in dd) {
      if (params[d] === undefined) {
        params[d] = dd[d];
      }
    }
    if (params.createTime) {
      params.createTime = params.createTime.format('YYYY-MM-DD');
    }
    API.getOrgList()
      .then((res) => {
        if (res) {
          setOrgList(
            res.t.map((item) => {
              return {
                label: item.name,
                value: item.id,
              };
            }),
          );
        }
      })
      .then(() => {
        API.findAll(params).then((res) => {
          if (res) {
            setDataSouce(res.t.queryList);
            setPagination({
              ...pagination,
              total: res.t.totalSize, //总数
              current: res.t.currentPage,
              pageSize: res.t.pageSize,
            });
          }
        });
      });
  };
  useEffect(() => {
    initList(params);
  }, [params]);

  const rowSelection = {
    columnWidth: 80,
    selectedRowKeys: cuiban,
    onChange: (selectedRowKeys) => {
      setCuiBan(selectedRowKeys);
    },
    getCheckboxProps: (record) => ({
      disabled: record.status == 3 || (record.status != 3 && !record.sfcb),
    }),
  };
  const CuiBan = () => {
    const securityIdList = [];
    cuiban.map((item) => {
      securityIdList.push({
        id: item,
      });
    });
    const cuiparams = { securityIdList: securityIdList };
    if (securityIdList.length == 0) {
      notification.error({
        message: '请选择要催办的单位',
      });
    } else {
      API.reminder(cuiparams).then((res) => {
        if (res) {
          initList(params);
          notification.success({
            message: '催办成功',
          });
        }
        setCuiBan([]);
      });
    }
  };

  const changeParams = (data = {}) => {
    setParams({
      ...data,
      pageNo: 1,
      pageSize: 10,
    });
  };
  const pageSizeChange = (page) => {
    setParams({
      ...params,
      pageNo: page.current,
      pageSize: page.pageSize,
    });
  };

  const delFn = (id) => {
    API.delSc({ id: id }).then((res) => {
      if (res) {
        notification.success({
          message: '删除成功',
        });
        initList(params);
      }
    });
  };
  return (
    <>
      <SearchList searchList={searchList} initList={changeParams}></SearchList>
      <div className="bgf main-x">
        {orgId == '101' ? (
          <div className="tools-x">
            <Button
              type="link"
              icon={<PlusCircleFilled />}
              className="btn-icon"
              onClick={linkAdd}
            >
              新增
            </Button>
            <Button
              type="link"
              icon={<SelectOutlined />}
              className="btn-icon"
              onClick={CuiBan}
              disabled={dataSouce.length === 0}
            >
              催办
            </Button>
          </div>
        ) : (
          ''
        )}
        <Table
          columns={columns}
          dataSource={dataSouce}
          className="custom-table"
          rowSelection={orgId == '101' ? rowSelection : false}
          pagination={pagination}
          rowKey="id"
          onChange={pageSizeChange}
        ></Table>
      </div>
    </>
  );
}

export default SafeCheckManage;
